<template>
	<view>
		
		<view class="onebox">
			<!-- <swiper class="swiper" circular :indicator-dots="true" :autoplay="false" :interval="2000"
			       :duration="500">
			    <swiper-item v-for="item in worksDetail.file" :key="item.id">
			     <image v-if="item.type === 'image'" class="img" :src="handlefinalImage(item.imgList[0])" mode="aspectFill"></image>
			     <video style="width: 100%;height: 100%;" v-else :src="handlefinalImage(item.imgList[0])" controls></video>
			    </swiper-item>
			   </swiper> -->
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="false" :interval="2000" @change="swiperbindChange"
				:duration="500">
				<swiper-item v-for="(item,index) in imglist" :key="index">
					<image :src="item"></image>
					<!-- <video class="vodiobox" v-else :src="item.img" controls></video> -->
				</swiper-item>
			</swiper>
			<view class="numbox">{{imgCurrent+1}}/{{imglist.length}}</view>
			<view class="abox" v-if="info" :style="{'opacity':info.status==2?'0.5':''}">
				<!-- <image class="bgimg" src="../../static/bg4.png" ></image> -->
				<view class="lineone">
					<view class="oneleft">
						<view class="titlebox">{{info.activity_name}}</view>
						<view class="tipbox">
							<view class="tipitem" v-for="(item,index) in tiplist.slice(0,4)" :key="index"
							:style="{'background':index==0?'#FDE5DE':index==1?'#FEECE1':index==2?'#F7EBFE':index==3?'#C5E1FE':'',
							'color':index==0?'#FF592B':index==1?'#FF852B':index==2?'#BB52FD':index==3?'#3583D5':''}">
							<!-- :style="getRandomColor(item)" -->
							{{item}}
							</view>
						</view>
					</view>
					<!-- status等于0时为 招募中,status等于1时为进行中，status等于2时为已结束-->
					<!-- <view class="oneright">
						<image v-if="info.status==1" src="../../static/bg16.png"></image>
						<image v-if="info.status==0" src="../../static/ing.png"></image>
						<image v-if="info.status==2" src="../../static/end.png"></image>
					</view> -->
				</view>
				<view class="linetwo" style="margin-top: 20rpx;"  v-if="info">
					活动起止时间:<text style="color: #000;">{{info.apply_start_time|dateFormat}}</text> 至 <text style="color: #000;">{{info.apply_start_time|dateFormat}}</text>
				</view>
				<view class="linetre" v-if="info.comfirm_num">
					<view class="twoleft">
						<view>招募进度:</view>
						<progress v-if="info.comfirm_num" style="width: 470rpx; margin: 0 20rpx;" :percent="((info.comfirm_num/info.activity_num)*100).toFixed(2)" stroke-width="3" show-info/>
					</view>
					<view class="tworight">{{info.comfirm_num}}/<text style="color: #000;">{{info.activity_num}}</text></view>
				</view>
			</view>
			<view class="bbox" v-if="info">
				<!-- <view class="xianmuinfo" @click="openditu(info.address)">
					<view class="treleft">
						<image class="oneimage" src="../../static/dingwei.png"></image>
					</view>
					<view class="trebet">活动地址</view>
					<view class="treright">{{info.address}}</view>
				</view> -->
				<view class="xianmuinfo">
					<!-- <view class="treleft">
						<image class="twoimage" src="../../static/shijian.png"></image>
					</view> -->
					<view class="trebet">报名时长</view>
					<view class="treright">{{info.apply_start_time|dateFormat}}<text style="color: #000;margin: 0 7rpx;">至</text> {{info.apply_end_time|dateFormat}}</view>
				</view>
				<!-- <view class="xianmuinfo">
					<view class="treleft">
						<image class="treimage" src="../../static/lianxiren.png"></image>
					</view>
					<view class="trebet">联系人</view>
					<view class="treright">
					<view>{{info.linkman}}</view>
					<view class="phone" v-if="info.mobile" @click="Tophone()">拨打电话</view>
					</view>
					
				</view> -->
			</view>
			<view class="cbox">
				<view class="biaoti">
					<view class="tit"></view>
					<view class="titlename">活动详情</view>
				</view>
				<view v-html="info.content"></view>
			</view>
			
		<!-- 	<view class="cbox" v-if="reallist.length>0">
				<view class="biaoti">
					<view class="tit"></view>
					<view class="titlename">最新报名</view>
				</view>
				<view class="avatarbox"  v-if="!moreindex">
					<view class="avataritem" v-for="(item,index) in reallist" :key="index" >
						<image :src="item.headpic"></image>
						<view class="usernamebox">{{item.username}}</view>
					</view>
				</view>
				<view class="avatarbox" v-if="moreindex">
					<view class="avataritem" v-for="(item,index) in reallist.slice(0,5)" :key="index" >
						<image :src="item.headpic"></image>
						<view class="usernamebox">{{item.username}}</view>
					</view>
				</view>
				<view class="more" @click="Changelist()">
					<view v-if="moreindex">查看更多</view>
					<view v-else>收起更多</view>
					<image v-if="moreindex" src="../../static/xiangxia.png"></image>
					<image v-else src="../../static/xiangshang.png"></image>
				</view>
			</view> -->
			<!-- status等于0时为 招募中,status等于1时为进行中，status等于2时为已结束-->
			<!-- <view class="cbox" v-if="info.status==2&&commentlist.length>0">
				<view class="biaoti">
					<view class="tit"></view>
					<view class="titlename">评论<text style="color: #888888;font-size: 26rpx;">({{commentlist.length}})</text></view>
					<view class="moremsg" @click="Tomsg()">
						<view>更多</view>
						<image src="../../static/fanhui.png"></image>
					</view>
				</view>
				<view class="commentbox" v-for="(item,index) in commentlist.slice(0,3)" :key="index">
					<view class="commentone">
						<view class="fourleft">
							<view class="fiveleft">
								<image :src="item.headpic"></image>
							</view>
							<view class="fiveright">
								<view class="commenname">{{item.username}}</view>
								<image v-for="(sitem,sindex) in 2" src="../../static/star.png"></image>
							</view>
						</view>
						<view class="fourright">{{item.create_time}}</view>
					</view>
					<view class="commenttwo">{{item.content}}</view>
					<view class="commenttre">
						<view class="imgbox" v-for="(imgitem,imgindex) in item.comment_img" :key="imgindex">
							<image :src="imgitem"></image>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<!-- status 活动状态 0未开始 1进行中 2已结束  status-->
		<!-- has_apply  1已报名 0未报名 -->
		<view style="height: 130rpx;"></view>
		<view class="navbet" >
			<view class="navone" v-if="info.status==1&&info.has_apply==0" @click="openmodel()">我要报名</view>
			<view class="navone" v-if="info.status==1&&info.has_apply==1" >已报名</view>
			<view class="staredbut" v-if="info.status==2">活动已结束</view>
			<view class="endbut" v-if="info.status==0">活动未开始</view>
		</view>
		<wpop ref="wpop">
			<template v-slot:box_template>
				<view class="modelbox">
					<view class="titlemodel">报名信息</view>
					<view class="modeline">
						<view class="modelleft">姓名</view>
						<input class="modelright" v-model="myinfo.realname" placeholder="请输入姓名" placeholder-style="font-size: 28rpx;"></input>
					</view>
					<view class="modeline">
						<view class="modelleft">联系方式</view>
						<input class="modelright" v-model="myinfo.mainPhone" placeholder="请输入联系方式"  placeholder-style="font-size: 28rpx;"></input>
					</view>
					<!-- <view class="modeline">
						<view class="modelleft">家庭住址</view>
						<input class="modelright" v-model="address" placeholder="请输入家庭住址" placeholder-style="font-size: 28rpx;"></input>
					</view> -->
					<view class="modelbut">
						<view class="modelone" @click="closenmodel()">取消</view>
						<view class="modeltwo"  @click="tosign()">确认</view>
					</view>
				</view>
			</template>
		</wpop>
	</view>
</template>

<script>
	import wpop from '../../components/w-popup.vue'
	// import debouncer from '@/utils/debouncer.js'
	export default {
		components:{
			wpop
		},
		data() {
			return {
				statusBarHeight: 20,
				/* 状态栏高度 */
				navBarHeight: 45,
				/* 导航栏高度 */
				windowWidth: 375,
				/* 窗口宽度 */
				/* 设定状态栏默认高度 */
				imglist:[],
				tiplist:[],
				avatarlist:[],
				reallist:[],
				startlist:[],
				moreindex:false,
				commentlist:[],
				imglist:[],
				//<!-- status等于0时为 招募中,status等于1时为进行中，status等于2时为已结束-->
				imgCurrent: 0 ,
				id:'',
				info:{},
				num:'',
				timetype:'',
				
				
				address:'',
				myinfo:{
					realname:'',
					mainPhone:'',
				},
				token: uni.getStorageSync('token') || '',
				activityinfo:{},
				requestStatus:false,//防抖
				// token: JSON.parse(uni.getStorageSync('token') || ''),
				// token:'o6Xw7536VjhAWeCsR8bAVeASUH34'/api/api/user_liveness
			}
		},
		onLoad(option) {
			this.getnav()
			this.id = option.id||3
			this.getmyinfo()
			this.Changelist()
			// this.getcommentlist()
			// this.getinfo()
			
		},
		onShow() {
			this.getinfo()//活动详情
			// this.getactivity()
		},
		filters:{
		            //过滤器 用于格式化时间
		            dateFormat: function(value) {           
		                var date = new Date(value*1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
		                var year = date.getFullYear();
		                var month = ("0" + (date.getMonth() + 1)).slice(-2);
		                var sdate = ("0" + date.getDate()).slice(-2);
		                var hour = ("0" + date.getHours()).slice(-2);
		                var minute = ("0" + date.getMinutes()).slice(-2);
		                var second = ("0" + date.getSeconds()).slice(-2);
		                // 拼接
		                var result =  month + "-" + sdate + " " + hour + ":" + minute //+ ":" + second;
		                // 返回
		                return result;
		            },
		        },
		methods: {
			// debouncer,
			totry(){
				console.log('qwe')
			},
			getnav() {
				// 获取手机系统信息
				const info = uni.getSystemInfoSync()
				// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
				this.statusBarHeight = info.statusBarHeight
				this.windowWidth = info.windowWidth
				// 除了h5 app mp-alipay的情况下执行
				// #ifndef H5 || APP-PLUS || MP-ALIPAY
				// 获取胶囊的位置
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				console.log(menuButtonInfo);
				// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
				this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
					.statusBarHeight)
				this.windowWidth = menuButtonInfo.left
				// #endif
			},
			swiperbindChange(e) {
			  this.imgCurrent = e.detail.current;
			},
			getmyinfo() {
				this.$http({
					url: 'api/Wechat/userinfo',
				}).then(res => {
					this.myinfo = res.data
				})
			},
			getRandomColor(item) {
			            const rgb = []
			            for (let i = 0; i < 3; ++i) {
			                let color = Math.floor(Math.random() * 256).toString(16)
			                color = color.length == 1 ? '0' + color : color
			                rgb.push(color)
			            }
			            return {
							background:'#' + rgb.join(''),
						}
			        },
			Changelist(){
				this.moreindex = !this.moreindex
				if(this.moreindex){
					// this.reallist = this.startlist
				}else{
					// this.reallist = this.avatarlist
				}
			},
			openmodel(){
				this.$refs.wpop.show()
				// this.getactivity()
			},
			closenmodel(){
				this.$refs.wpop.hide()
			},
			getactivity() {
				this.$http({
					url: 'api/api/user_liveness',
					data: {
						token: this.token
					}
				}).then(res => {
					this.activityinfo = res.data
				})
			},
			//报名
			tosign(){
				// if(!this.token){
				// 	uni.switchTab({
				// 		url:'/pages/index/index'
				// 	})
				// }
				if(!this.requestStatus){
					this.requestStatus = true;
					setTimeout(()=>{
						this.requestStatus = false;
					}, 1500)
					this.$http({
						url:'api/Wechat/applyActivity',
						data:{
							token:this.token,
							activity_id:this.id||'',
							truename:this.myinfo.realname,
							mobile:this.myinfo.mainPhone,
							// address:this.address,
						}
					}).then(res=>{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						this.getinfo()
						this.$refs.wpop.hide()
					})
				}
				
			},
			//打卡
			Tosign(){
				this.$http({
					url:'api/api/getSignStatus',
					data:{
						token:this.token,
						activity_id:this.id||''
					}
				}).then(res=>{
					this.num = res.data
					uni.navigateTo({
						url:'../sign/sign?num='+this.num + '&id='+this.id
					})
				})
				
			},
			Tolangtime(){
				uni.navigateTo({
					url:'../Duration_publicity/Duration_publicity?id='+this.id
				})
			},
			Tomsg(){
				uni.navigateTo({
					url:'../morecomment/morecomment?id='+this.id
				})
			},
			getinfo(){
				this.$http({
					url:'/api/Wechat/activityDetail',
					data:{
						activity_id:this.id||'',
						token:this.token
					}
				}).then(res=>{
					this.info = res.data
					this.info.content = this.$replace_Rich_text(res.data.content)
					this.imglist= res.data.activity_img.split(',')
					// this.tiplist = res.data.tag
					// this.reallist = res.data.wins
					// this.avatarlist = res.data.wins
					// this.startlist = this.avatarlist.slice(0,5)
					// this.reallist = this.startlist
					var currenttime = parseInt(new Date().getTime()/1000)
					console.log(this.info.end_time,currenttime,this.info.start_time)
					// if(this.info.end_time>=currenttime>=this.info.start_time){
					// 	this.timetype = 1//活动期间
					// }if(currenttime<this.info.start_time){
					// 	this.timetype = 2//活动之前
					// }if(currenttime>this.info.end_time){
					// 	this.timetype = 3//活动之后
					// }
					// console.log(this.timetype,'this.timetype')
					// this.info.start_time
				})
			},
			getcommentlist(){
				this.$http({
					url:'api/api/comment_list',
					data:{
						id:this.id
					}
				}).then(res=>{
					this.commentlist= res.data
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			Tophone(){
				uni.makePhoneCall({
					phoneNumber: this.info.mobile //仅为示例
				});
				// uni.showToast({
				// 	title:'暂时不能使用' 
				// })
			},
			openditu(infos){
				this.getinfo()
				console.log(infos,this.info,111)
				uni.navigateTo({
					url:'/pages/mappage/mappage?infos=' + infos + '&info=' + JSON.stringify(this.info)
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f2f2f2;
	}
</style>
<style lang="scss" scoped>
	.navbar {
		margin-bottom: 20rpx;

		.navbar-fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 399;
			width: 100%;
			// height: 102rpx;
			padding-bottom: 20rpx;
			background: #FFFFFF;


			.navbar-content {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0rpx 30rpx;
				// height: 142rpx;
				box-sizing: border-box;

				image {
					width: 20rpx;
					height: 31rpx;
					margin-right: 10rpx;
				}

				.navbar-search {
					display: flex;
					align-items: center;
					color: #000;
					// padding: 0 10px;
					width: 100%;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;

				}

			}
		}
	}

	.onebox {
		
		// margin-top: 20rpx;
		.swiper {
			width: 100%;
				height: 700rpx;
				image{
					width: 100%;
					height: 700rpx;
				}
				.vodiobox{
					width: 100%;
						height: 700rpx;
				}
			}
			.numbox{
				width: fit-content;
				padding: 0 20rpx;
				position: absolute;
				right: 30rpx;
				height: 46rpx;
				line-height: 46rpx;
				background: #000000;
				opacity: 0.5;
				border-radius: 23rpx;
				color: #FFFFFF;
				margin-top: -80rpx;
			}
			.abox{
				padding: 40rpx 23rpx;
				background-color: #FFF;
				border-radius: 0rpx 0rpx 20rpx 20rpx;
				.bgimg{
					width: 208rpx;
					height: 297rpx;
					position: absolute;
					right: 0;
					margin-top: -40rpx;
				}
				.lineone{
					display: flex;
					justify-content: space-between;
					.oneleft{
						width: 80%;
						.titlebox{
							-webkit-line-clamp: 1;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.tipbox{
							display: flex;
							flex-wrap: wrap;
							.tipitem{
								width: fit-content;
								padding: 0 20rpx;
								margin: 36rpx 16rpx 36rpx 0;
								height: 44rpx;
								background: #FDE5DE;
								border-radius: 22rpx;
								line-height: 44rpx;
								font-size: 26rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
							}
						}
					}
					.oneright{
						width: 20%;
						image{
							width: 118rpx;
							height: 127rpx;
						}
					}
				}
				.linetwo{
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					// color: #888888;
					margin-bottom: 35rpx;
				}
				.linetre{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-family: Source Han Sans CN;
					font-weight: 400;
					.twoleft{
						width: 630rpx;
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #888888;
					}
					.tworight{
						font-size: 28rpx;
						color: #222222;
					}
				}
			}
			.bbox{
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 36rpx 24rpx 0 24rpx;
				margin-top: 24rpx;
				.xianmuinfo{
					display: flex;
					font-family: Source Han Sans CN;
					font-weight: 400;
					// align-items: center;
					// align-items: center;
					// height: 80rpx;
					.treleft{
						width: 8%;
						.oneimage{
							width: 20rpx;
							height: 24rpx;
						}
						.twoimage{
							width: 27rpx;
							height: 27rpx;
						}
						.treimage{
							width: 26rpx;
							height: 26rpx;
						}
					}
					.trebet{
						width: 18%;
						display: inline-block;
						text-align: justify;
						font-size: 30rpx;
						color: #555555;
						    &::after {
						      content: "";
						      display: inline-block;
						      width: 100%;
						    }
					}
					.treright{
						width: 74%;
						margin-left: 3%;
						font-size: 30rpx;
						color: #222222;
						display: flex;
						
						// align-items: center;
						.phone{
							width: 136rpx;
							height: 48rpx;
							border: 2rpx solid #3774EF;
							border-radius: 10rpx;
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #3774EF;
							text-align: center;
							line-height: 48rpx;
							position: absolute;
							right:30rpx
						}
					}
					
				}
			}
			.cbox{
				background: #FFFFFF;
				border-radius: 10rpx;
				padding: 40rpx 23rpx;
				margin-top: 24rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #222222;
				.biaoti{
					display: flex;
					align-items: center;
					margin-bottom: 50rpx;
					.titlename{
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #222222;
					}
					.moremsg{
						position: absolute;
						right: 23rpx;
						display: flex;
						align-items: center;
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #555555;
						image{
							width: 11rpx;
							height: 20rpx;
							margin-left: 15rpx;
						}
					}
				}
				.commentbox{
					font-family: Source Han Sans CN;
					font-weight: 400;
					.commentone{
						display: flex;
						.fourleft{
							width: 70%;
							display: flex;
							align-items: center;
							.fiveleft{
								width: 20%;
								image{
									width: 90rpx;
									height: 90rpx;
									border-radius: 50%;
								}
							}
							.fiveright{
								width: 80%;
								.commenname{
									font-size: 28rpx;
									color: #222222;
									-webkit-line-clamp: 1;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									overflow: hidden;
									text-overflow: ellipsis;
								}
								image{
									width: 23rpx;
									height: 22rpx;
									margin-right: 8rpx;
								}
							}
						}
						.fourright{
							width: 30%;
							font-size: 26rpx;
							color: #888888;
						}
					}
					.commenttwo{
						margin-top: 36rpx;
						font-size: 28rpx;
						color: #222222;
					}
					.commenttre{
						display: flex;
						flex-wrap: wrap;
						margin: 40rpx 0;
						.imgbox{
							width: 33.3%;
							margin: 10rpx 0;
							border-radius: 10rpx;
							text-align: center;
							image{
								width: 220rpx;
								height: 220rpx;
								border-radius: 10rpx;
							}
						}
					}
				}
				.avatarbox{
					display: flex;
					flex-wrap: wrap;
					.avataritem{
						width: 20%;
						margin-bottom: 20rpx;
						text-align: center;
						image{
							width: 120rpx;
							height: 120rpx;
							border-radius: 50%;
							margin-bottom: 15rpx;
						}
						.usernamebox{
							-webkit-line-clamp: 3;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
				.more{
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 18rpx;
						height: 18rpx;
					}
				}
			}
	}
	.navbet{
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 101rpx;
		background: #FFFFFF;
		font-family: Source Han Sans CN;
		.navone{
			margin: 10rpx 32rpx;
			height: 80rpx;
			background: linear-gradient(0deg, #3583D5, #449FFE);
			border-radius: 40rpx;
			font-size: 34rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}
		.endbut{
			// width: 472rpx;
			margin: 10rpx 32rpx;
			height: 80rpx;
			background: #999999;
			border-radius: 40rpx;
			font-size: 34rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}
		.staredbut{
			height: 80rpx;
			background: #999999;
			margin: 10rpx 32rpx;
			border-radius: 40rpx;
			font-size: 34rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}
		.navtwo{
			display: flex;
			justify-content: space-between;
			margin: 0rpx 32rpx;
			align-items: center;
			font-size: 26rpx;
			font-weight: 400;
			color: #555555;
			height: 101rpx;
			image{
				width: 50rpx;
				height: 50rpx;
				margin-right: 19rpx;
			}
			
			.signbut{
				width: 472rpx;
				height: 80rpx;
				background: linear-gradient(90deg, #449FFE, #3583D5);
				border-radius: 40rpx;
				font-size: 34rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
			}
		}
	}
	.modelbox{
		padding-bottom: 20rpx;
		.titlemodel{
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
		}
		.modeline{
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			height: 80rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			.modelleft{
				width: 25%;
				text-align: center;
			}
			.modelright{
				width: 75%;
				text-align: right;
				font-size: 28rpx;
			}
		}
		.modelbut{
			display: flex;
			margin-top: 20rpx;
			justify-content: flex-end;
			font-size: 28rpx;
			.modelone{
				width: 25%;
				text-align: center;
				height: 50rpx;
				color: #555555;
				border: solid 1rpx #666666;
				line-height: 50rpx;
				border-radius: 30rpx;
				margin-right: 30rpx;
			}
			.modeltwo{
				color: #3774EF;
				width: 25%;
				text-align: center;
				height: 50rpx;
				border: solid 1rpx #3774EF;
				line-height: 50rpx;
				border-radius: 30rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>
